<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            font-family: sans-serif;
        }

        span,
        div em {
            padding: 5px;
            border: 1px solid green;
            display: inline-block;
            margin-bottom: 3px;
        }

        .first span:nth-child(2n+1),
        .second span:nth-child(2n+1),
        .third span:nth-of-type(2n+1),
        .forth span:first-child,
        .fifth span:first-of-type {
            background-color: lime;
        }

        
        .sixth :only-of-type {
            color: red;
        }
    </style>
</head>

<body>
    <h3><code>span:nth-child(2n+1)</code>, 子元素中没有
        <code>&lt;em&gt;</code> 元素。
    </h3>
    <p>子元素中索引为 1, 3, 5, 7 的元素被选中。</p>
    <div class="first">
        <span>Span 1!</span>
        <span>Span 2</span>
        <span>Span 3!</span>
        <span>Span 4</span>
        <span>Span 5!</span>
        <span>Span 6</span>
        <span>Span 7!</span>
    </div>

    <br>

    <h3><code>span:nth-child(2n+1)</code>, 子元素中包含一个
        <code>&lt;em&gt;</code> 元素。
    </h3>
    <p>子元素中索引为 1, 5, 7 的元素被选中。<br>
       3 虽然也是计算结果，但是索引为3的这个子元素并不是<code>&lt;span&gt;</code>。
    </p>
    <div class="second">
        <span>Span!</span>
        <span>Span</span>
        <em>This is an `em`.</em>
        <span>Span</span>
        <span>Span!</span>
        <span>Span</span>
        <span>Span!</span>
        <span>Span</span>
    </div>

    <br>

    <h3><code>span:nth-of-type(2n+1)</code>, 子元素中包含一个
        <code>&lt;em&gt;</code> 元素。
    </h3>
    <p>子元素中索引为 1, 4, 6, 8 的元素被选中。<br>
        nth-of-type，查找是在所有标签为span的子元素，然后按照先后顺序索引从1开始排序。然后找索引符合2n+1规则的元素。
    </p>
    <div class="third">
        <span>Span!</span>
        <span>Span</span>
        <em>This is an `em`.</em>
        <span>Span!</span>
        <span>Span</span>
        <span>Span!</span>
        <span>Span</span>
        <span>Span!</span>
    </div>

    <br>

    <h3><code>span:first-child</code>，找到作为第一个子元素的span元素</h3>
    <div class="forth">
        <div>
            <span>Span 1!</span>
            <span>Span 2</span>
            <span>Span 3!</span>
        </div>
          
        <div>
            <em>This is an `em`.</em>
            <span>Span!</span>
            <span>Span</span>
        </div>
    </div>

    <br>

    <h3><code>span:first-of-type</code>，找出兄弟元素中其类型的第一个元素</h3>
    <div class="fifth">
        <div>
            <span>Span 1!</span>
            <span>Span 2</span>
            <span>Span 3!</span>
        </div>
          
        <div>
            <em>This is an `em`.</em>
            <span>Span!</span>
            <span>Span</span>
        </div>
    </div>

    <br>

    <h3><code>:only-of-type</code>，找出兄弟元素中没有和自己是相同类型的元素</h3>
    <div class="sixth">
        <div>I am `div` #1.</div>
        <p>I am the only `p` among my siblings.</p>
        <div>I am `div` #2.</div>
        <div>I am `div` #3.
            <i>I am the only `i` child.</i>
            <em>I am `em` #1.</em>
            <em>I am `em` #2.</em>
        </div>
    </div>

    <br>

</body>

</html>